<template>
    <div class="uploadwrap">
        <el-tabs type="card" v-model="activeName"  @tab-click="handleClick">
            <el-tab-pane label="轮播信息列表" name="first">
                <el-row >
                    <h1 class="title">轮播图信息列表</h1>
                       <el-table
                        v-loading="tableloading"
                        :data="tableData"
                        border
                        style="width: 100%">
                        <el-table-column
                        type="index"
                            width="55">
                        </el-table-column>
                        <el-table-column
                            sortable
                            align="center"
                            prop="createTime"
                            label="日期"
                            width="190">
                            <template slot-scope="scope">
                            <i class="el-icon-time"></i>
                            <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
                            </template>
                            </el-table-column>
                            <el-table-column
                            prop="title"
                            align="center"
                            label="名称"
                            min-width="260">
                            </el-table-column>
                            <el-table-column
                            prop="bannerChannel"
                            align="center"
                            label="类型"
                            min-width="260">
                                <template slot-scope="scope">{{getsourceTYpe(scope.row.bannerChannel)}}</template>
                            </el-table-column>
                            <el-table-column
                            prop="ranking"
                            align="center"
                            label="排序"
                            min-width="260">
                            </el-table-column>ranking
                            <el-table-column label="操作" min-width="190" align="center" fixed="right">
                                <template slot-scope="scope">
                                    <el-button
                                    icon="el-icon-edit"
                                    style="background: #399bff;
                                    border-color: #399bff;
                                    color: #fff;"
                                    size="mini"
                                    v-waves
                                    @click="edite(scope)"
                                    >编辑</el-button>
                                    <el-button
                                    icon="el-icon-delete"
                                    size="mini"
                                    type="danger"
                                    @click="deleteItem(scope)"
                                    >删除</el-button>
                                </template>
                                </el-table-column>
                            </el-table>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="上传轮播图片" name="second">
                <el-row>
                    <h1 class="title">上传轮播图片</h1>
                    <el-col :span="10">
                        <el-upload
                            class="upload-demo"
                            ref="upload"
                            drag
                            :action="actionURL"
                            name = "file"
                            list-type="picture"
                            :on-progress="onprogress"
                            :on-remove="handleRemove"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                            :on-error="handleAvatarError"
                            :auto-upload="false"
                            :on-exceed="handleexceed"
                            :limit="limitPoster">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb<br>
                                <el-button type="primary" v-waves style="margin: 5px 0;" @click="doImgUpload">点击上传</el-button>
                            </div>
                        </el-upload>
                    </el-col>
                    <el-col :span="10">
                        <el-form :model="ruleForm" :rules="ruleFormrules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                            <el-form-item label="" prop="bannerUrl" hidden>
                                <el-input v-model="ruleForm.bannerUrl" ></el-input>
                            </el-form-item>
                            <el-form-item label="标题" prop="title">
                                <el-input v-model="ruleForm.title" placeholder="请输入标题"></el-input>
                            </el-form-item>
                            <el-form-item label="资源类型" prop="bannerChannel">
                                <el-select v-model="ruleForm.bannerChannel" placeholder="请选择类型">
                                <el-option label="电影" value="01"></el-option>
                                <el-option label="电视剧" value="02"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="排序" prop="ranking">
                                <el-input v-model="ruleForm.ranking" placeholder="请输入排序"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" v-waves :loading="submitLoad" @click="submitForm('ruleForm')">立即提交</el-button>
                                <el-button @click="resetForm('ruleForm')">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
            </el-tab-pane>
        </el-tabs>
            <el-dialog :visible.sync="dialogVisible" title="编辑信息">
              <el-row :gutter="24">
                <el-col :span="12">
                      <el-upload
                        class="upload-demo"
                        ref="upload"
                        drag
                        :action="actionURL"
                        name = "file"
                        :on-progress="onprogress"
                        :on-remove="handleRemove"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        :on-error="handleAvatarError"
                        :auto-upload="false"
                        :on-exceed="handleexceed"
                        :limit="limitPoster">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb<br>
                            <el-button type="primary" v-waves style="margin: 5px 0;" @click="doImgUpload">重新上传</el-button>
                        </div>
                    </el-upload>
                </el-col>
                <el-col :span="12">
                    <el-form :model="ruleFormUpdate"  ref="ruleFormUpdate" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="标题" prop="bannerId" hidden>
                            <el-input v-model="ruleFormUpdate.bannerId" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="封面" prop="bannerUrl" hidden>
                            <el-input v-model="ruleFormUpdate.bannerUrl" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="资源类型" prop="bannerChannel">
                            <el-select v-model="ruleFormUpdate.bannerChannel" placeholder="请选择类型" clearable>
                            <el-option label="电影" value="01"></el-option>
                            <el-option label="电视剧" value="02"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="标题" prop="title">
                            <el-input v-model="ruleFormUpdate.title" placeholder="请输入标题" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="排序" prop="ranking">
                            <el-input v-model="ruleFormUpdate.ranking" placeholder="请输入排序" clearable></el-input>
                        </el-form-item>  
                        <el-form-item>
                            <el-button type="primary" v-waves :loading="submitUpdateLoad" @click="submitFormUpdate(ruleFormUpdate)">立即提交</el-button>
                            <el-button @click="resetForm('ruleFormUpdate')">重置</el-button>
                        </el-form-item>
                    </el-form>
                  </el-col>
              </el-row>
          </el-dialog>
    </div>
</template>

<script>
import waves from '@/directive/waves/index.js'
import Enum from "@/common/Enum.js"
import { addBanner ,uploadBanner, getBannerDetail,getBannerDataTable,deleteBanner,updateBanner } from "@/api/index.js"
export default {
    directives: {
        waves
    },
    data() {
        return {
            activeName: 'first',
            dialogVisible : false,
            submitUpdateLoad : false,
            tableloading : false,
            submitLoad : false,
            actionURL : uploadBanner,
            pageIndex: this.$store.getters.getUserListIndex1,
            pageSize: 10,
            dataTotal: 0,
            fileList : [],
            percentage: 0,
            videopercentage: 0,
            posterurl : '',
            videourl : '',
            postername : '',
            videoname : '',
            acceptlist : ['image/jpeg','image/jpg','image/png'],
            acceptvideolist : ['audio/mp4','audio/avi','audio/rmvb'],
            limitPoster : 1,
            ruleForm: {
                title : '',
                bannerChannel : '',
                bannerUrl : '',
                ranking : ''
            },
            ruleFormrules: {
                bannerUrl :[
                    { required: true, message: '请上传图片', trigger: 'change' }
                ],
                title: [
                    { required: true, message: '请输入标题', trigger: 'blur' }
                ],
                bannerChannel: [
                    { required: true, message: '请至少选择一个分类', trigger: 'change' }
                ],
                ranking : [
                    { required: true, message: '请输入排序', trigger: 'blur' }
                ]
            },
            ruleFormUpdate: {},
            tableData : []
        }
    },
    methods: {
        handleClick(tab, event) {
            if(tab.name == "first"){
                this.getList();
            };
        },
        getsourceTYpe(type){
            return Enum.getsourceTYpe(type);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/png';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        handleexceed(files, fileList){
            const limitPoster = this.limitPoster > 1;
            if (!limitPoster) {
                this.$message.error('最多上传1张');
            }
            return  limitPoster;
        },
        onprogress(event, file, fileList){
            this.ruleForm.bannerUrl = file.name;
        },
        handleAvatarError(res, file){
            // console.log(res, file)
        },
        handleAvatarSuccess(res, file) {
            // console.log(res, file)
            // this.imageUrl = URL.createObjectURL(file.raw);
        },
        handleRemove(file, fileList) {
            // console.log(file, fileList);
        },
        /////////////点击上传图片
        doImgUpload(){
            let that = this;
            that.$refs.upload.submit();
        },
        //////获取列表
        getList(){
            this.tableloading = true;
            let formData = {
                start : this.pageIndex,
                length : this.pageSize
            };
            getBannerDataTable(formData).then(response => {
                if (response.data) {
                    this.tableData = response.data;
                    this.tableloading = false;
                } else {
                    this.tableloading = false;
                // this.$message.error(response.message);
                }
            }, response => {
            });
        },
        //////修改提交
        submitFormUpdate(){
            this.submitUpdateLoad = true;
            let formData = this.ruleFormUpdate;
            updateBanner(formData).then(response => {
                if (response.code == '0') {
                    this.submitUpdateLoad = false;
                    this.$message('添加成功');
                    this.dialogVisible = false;
                    this.getList();
                } else {
                    this.submitUpdateLoad = false;
                // this.$message.error(response.message);
                }
            }, response => {
            });
        },
        /////添加信息
        submitForm(formName) {
            this.submitLoad = true;
            this.$refs[formName].validate((valid) => {
                if (valid) {   /////
                    let formData = this.ruleForm;
                    addBanner(formData).then(response => {
                        if (response.code == '0') {
                            this.submitLoad = false;
                            this.$message('添加成功');
                        } else {
                            this.submitLoad = false;
                        // this.$message.error(response.message);
                        }
                    }, response => {
                    });
                } else {
                    if(!this.ruleForm.poster){
                        this.$message.error("还未上传封面");
                    }
                    this.submitLoad = false;
                    console.log('error submit!!');
                    return false;
                }
            });
        },
              /////获取详情
        getResourceBaseDetail(id){
            let formData = {
                bannerId : id,
            }
            getBannerDetail(formData).then(response => {
                if (response.code == '0') {
                    this.ruleFormUpdate = response.data;
                } else {
                // this.$message.error(response.message);
                }
            }, response => {
            });
        },
        ///////编辑
        edite(s){
                this.dialogVisible = true
                this.getResourceBaseDetail(s.row.bannerId);
        },
        ///////删除
        deleteItem(s){
            this.$confirm('确定要删除吗?', 'Warning', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(async() => {
                let formData = {
                    bannerId : s.row.bannerId,
                }
                deleteBanner(formData).then(response => {
                    if (response.code == '0') {
                        this.getList();
                    } else {
                    }
                }, response => {
                });
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                })
            }).catch(err => { console.error(err) })
        },
        ///////重置信息表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
    mounted(){
        this.getList();
    }
}
</script>
<style lang="scss" scope>
   .uploadwrap{
       .title{
            font-weight: bold;
            color: #9e9e9e;
            padding: 10px 0;
            margin: 20px 0 40px 0;
            border-bottom: 1px solid #E0E0E0;
       }
       .upload-demo{
            .el-icon-upload{
                font-size: 67px;
                color: #C0C4CC;
                margin: 40px 0 16px;
                line-height: 50px;
            }
       }
       .filelist{
            border: 1px solid #ccc;
            border-radius: 5px;
            position: relative;
            overflow: hidden;
            .posterimg{
                display: block;
                width: 100px;
                height: 100px;
                font-size: 80px;
                text-align: center;
                float: left;
                margin: 0 20px 0 0;
            }
            .el-icon-delete{
                font-size: 25px;
                width: 30px;
                height: 30px;
                margin-top: 40px;
                position: absolute;
                right: 10%;
                top: 0;
                cursor: pointer;
            }
            h5{
                line-height: 100px;
            }
        }
   }

</style>>